<template>
	<view>
		<u-sticky customNavHeight="0">
			<view>
				<view class="y-system-height bg-white"></view>
				<view class="bg-white y-flex y-font-size-26 y-p-y-20 y-p-x-30 y-align-center y-justify-between">
					<view class="w-90 y-flex y-justify-end" @click="isEdit = !isEdit">
						<span v-if="!isEdit">编辑</span>
						<span v-else>取消</span>
					</view>
					<view class="y-weight-bold y-font-size-32">
						购物车
					</view>
					<view class="w-90"></view>
				</view>
			</view>
		</u-sticky>
		<view>
			<view class="store-list y-p-30">
				<view class="bg-white store-single y-p-30 y-m-b-30 y-radius-30" v-for="(storeItem, storeIndex) in shoppingCart" :key="storeIndex">
					<view @click="storeSelBtn(storeIndex)" class="store-header y-flex y-align-center">
						<view class="sel-btn y-p-t-5">
							<u-icon v-if="(storeItem.isBuySelect && !isEdit) || (storeItem.isDelSelect && isEdit)" name="checkmark-circle-fill" color="#04BE02" size="40rpx"></u-icon>
							<view v-else class="no-select"></view>
						</view>
						<span class="y-font-size-30 y-m-l-13 y-m-r-10">{{storeItem.storeName}}</span>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="goods-list y-p-l-20">
						<view class="goods-item y-flex y-p-t-20" v-for="(goodsItem, goodsIndex) in storeItem.goodsList" :key="goodsIndex">
							<view @click="goodsSelBtn(storeIndex, goodsIndex)" class="y-flex y-align-center">
								<view class="sel-btn">
									<u-icon v-if="(goodsItem.isBuySelect && !isEdit) || (goodsItem.isDelSelect && isEdit)" name="checkmark-circle-fill" color="#04BE02" size="40rpx"></u-icon>
									<view v-else class="no-select"></view>
								</view>
							</view>
							<view class="y-m-l-15">
								<u-image :src="goodsItem.image" radius="10rpx" width="162rpx" height="162rpx"></u-image>
							</view>
							<view class="y-m-l-28 y-flex y-flex-1 y-flex-column">
								<view class="y-flex-1">
									<view class="goods-name y-font-size-28"> {{goodsItem.goodsName}} </view>
									<view class="goods-attr y-flex y-m-t-15">
										<u-tag v-if="goodsItem.attrList.length > 0" :text="goodsItem.attrList.join(';')" plain size="mini" type="warning"></u-tag>
										<u-tag v-else text="默认规格" plain size="mini" type="warning"></u-tag>
									</view>
								</view>
								<view class="goods-price y-flex y-align-end y-flex-1">
									<view class="y-flex-1 y-font-size-30 y-weight-bold color-price"> ￥ {{goodsItem.price}} </view>
									<view> 
										<u-number-box size="18" v-model="goodsItem.count" @change="countChange(storeIndex, goodsIndex)"></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 120rpx;"></view>
		</view>
		<view class="y-position-fixed y-bottom-0 y-left-0 y-right-0 y-p-y-20 y-p-x-30 bg-white y-flex">
			<view class="y-flex y-flex-1 y-align-center">
				<view @click="allSelBtn()" class="store-header y-flex y-align-center">
					<view class="sel-btn y-p-t-5">
						<u-icon v-if="allSelState" name="checkmark-circle-fill" color="#04BE02" size="40rpx"></u-icon>
						<view v-else class="no-select"></view>
					</view>
					<span class="y-font-size-28 y-m-l-10">全选</span>
				</view>
			</view>
			<view class="y-flex y-align-center y-font-size-28">
				<view v-if="!isEdit" class="y-font-size-33"> 总计: <span class="color-price y-weight-bold y-m-l-8">￥ {{totalPrice}} </span> </view>
				<view class="y-flex y-m-l-25">
					<u-button v-if="!isEdit" shape="circle" :hairline="false" :customStyle="submitBtnStyle"> 结算( {{totalSelCount}} ) </u-button>
					<u-button v-else shape="circle" :hairline="false" :customStyle="submitBtnStyle"> 删除( {{totalSelCount}} ) </u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false, //是否编辑（购物/编辑）
				shoppingCart: [],//购物车数据
				submitBtnStyle: {
					background: '#FD7026',
					color: '#ffffff',
					border: 'none'
				}//结算、删除按钮的样式
			}
		},
		computed:{
			//是否已经全部选中
			allSelState(){
				let buyAllSelect = true // 购物全选
				let delAllSelect = true // 编辑全选
				this.shoppingCart.forEach(sitem=>{
					sitem.goodsList.forEach(gitem=>{
						if(!gitem.isBuySelect) buyAllSelect = false;
						if(!gitem.isDelSelect) delAllSelect = false;
					})
				})
				if(!this.isEdit) return buyAllSelect;
				else return delAllSelect;
			},
			//总价格
			totalPrice(){
				let totalPrice = 0
				this.shoppingCart.forEach(sitem=>{
					sitem.goodsList.forEach(gitem=>{
						if(gitem.isBuySelect){
							totalPrice = totalPrice*1 + gitem.price*gitem.count
						}
					})
				})
				return totalPrice
			},
			//当前操作下选中的数量
			totalSelCount(){
				let buyCount = 0 // 购物全选
				let delCount = 0 // 编辑全选
				this.shoppingCart.forEach(sitem=>{
					sitem.goodsList.forEach(gitem=>{
						if(gitem.isBuySelect){
							buyCount = buyCount*1 + gitem.count
						}
						if(gitem.isDelSelect){
							delCount = delCount*1 + 1
						}
					})
				})
				if(!this.isEdit){
					return buyCount
				} else{
					return delCount
				}
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			//请求数据。。。
			getData(){
				for(let i = 0; i < 3; i++){
					let goodsList = []
					for(let j = 0; j < 2; j++){
						let obj = {
							id: i + i + j + j + '',
							goodsName: '商品名称',
							image: 'https://cdn.uviewui.com/uview/album/1.jpg',
							price: 222,
							attrList: ['白色', '24码'], 
							count: 1,
							isDelSelect: false,
							isBuySelect: false,
						}
						goodsList.push(obj)
					}
					this.shoppingCart.push({
						id: i + i + '',
						storeName: '商店名称旗舰店',
						isDelSelect: false,
						isBuySelect: false,
						goodsList: goodsList
					})
				}
			},
			//商家的选中与否
			storeSelBtn(storeIndex){
				if(!this.isEdit){ //购物
					this.shoppingCart[storeIndex].isBuySelect = !this.shoppingCart[storeIndex].isBuySelect
					this.shoppingCart[storeIndex].goodsList.forEach(item=>{
						item.isBuySelect = this.shoppingCart[storeIndex].isBuySelect
					})
				}else{//编辑
					this.shoppingCart[storeIndex].isDelSelect = !this.shoppingCart[storeIndex].isDelSelect
					this.shoppingCart[storeIndex].goodsList.forEach(item=>{
						item.isDelSelect = this.shoppingCart[storeIndex].isDelSelect
					})
				}
			},
			//商品的选中与否
			goodsSelBtn(storeIndex, goodsIndex){
				if(!this.isEdit){ //购物
					this.shoppingCart[storeIndex].goodsList[goodsIndex].isBuySelect = !this.shoppingCart[storeIndex].goodsList[goodsIndex].isBuySelect
					let allIsSel = true //是否已经全部选中
					this.shoppingCart[storeIndex].goodsList.forEach(item=>{
						if(!item.isBuySelect){
							allIsSel = false
						}
					})
					this.shoppingCart[storeIndex].isBuySelect = allIsSel
				}else{//编辑
					this.shoppingCart[storeIndex].goodsList[goodsIndex].isDelSelect = !this.shoppingCart[storeIndex].goodsList[goodsIndex].isDelSelect
					let allIsSel = true //是否已经全部选中
					this.shoppingCart[storeIndex].goodsList.forEach(item=>{
						if(!item.isDelSelect){
							allIsSel = false
						}
					})
					this.shoppingCart[storeIndex].isDelSelect = allIsSel
				}
			},
			//全选
			allSelBtn(){
				let toState = !this.allSelState
				if(!this.isEdit){//购物
					this.shoppingCart.forEach(sitem=>{
						sitem.isBuySelect = toState
						sitem.goodsList.forEach(gitem=>{
							gitem.isBuySelect = toState
						})
					})
				}else{//编辑
					this.shoppingCart.forEach(sitem=>{
						sitem.isDelSelect = toState
						sitem.goodsList.forEach(gitem=>{
							gitem.isDelSelect = toState
						})
					})
				}
			},
			//商品的数量增减
			countChange(storeIndex, goodsIndex){
				//请求后台改变购物车商品的数量。。。storeIndex, goodsIndex
			}
		}
	}
</script>

<style lang="scss" scoped>
	.w-90{
		width: 90rpx;
	}
	.sel-btn{
		width: 45rpx;
		height: 45rpx;
	}
	.no-select{
		width: 39rpx;
		height: 39rpx;
		border-radius: 50%;
		border: 1px solid rgb(235, 236, 238);
	}
</style>
